{extend name="public:base" /}
{block name="theme"}权限管理{/block}
{block name="small_theme"}角色列表{/block}
{block name="content"}
<style>
    body{
        font-family: "微软雅黑";
    }
    .add-box{
        width: 100%;
        padding:10px 10px 30px 10px;
        background: #fff;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .add-box>div{
        width: 49%;
        height: auto;
        border:1px solid #dfdfdf;
        padding:10px;
    }
    .box-header h2{
        color:#317eac;
        margin-top: 4px;
        margin-right: 5px;
    }
    .box-header{
        background: rgba(0,0,0,.1);
    }
    .form-group{
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        margin-bottom: 5px;
    }
    .form-group label{
        width: 15%;
        height: 30px;
        line-height: 30px;
    }
    .form-group .form-control{
        width: 60%;
        height: 30px;
        padding:3px 12px;
    }
    /*.form-group input{*/
        /*width: 85%;*/
        /*height: 30px;*/
        /*text-indent: 5px;*/
        /*outline: none;*/
        /*border:1px solid #d2d6de;*/
    /*}*/
    .form-group input:focus{
        border:1px solid #3c8dbc;
    }
    .form-group textarea{
        width: 85%;
        text-indent: 5px;
        outline: none;
        border:1px solid #d2d6de;
        resize: none;
    }
    .add-box>.btn-box{
        width: 200px;
        height: 40px;
        margin:20px auto;
        border:none;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .btn-box button{
        width: 80px;
        height: 40px;
    }
    .btn-color-o{
        background: #f39c12;
        color: #fff;
    }
    .btn-color-g{
        background: #222d32;
        color: #fff;
    }
    .btn-box button:hover{
        color: #fff;
    }
</style>
    <div class="col-xs-12">
        <h3 class="header blue lighter smaller">
            <i class="ace-icon fa fa-list-alt smaller-90"></i>
            设置角色和部门职位绑定
            <i class="ace-icon fa fa-plus smaller-90 middle" data-icon-hide="ace-icon fa fa-minus" data-icon-show="ace-icon fa fa-plus"></i>
        </h3>

        <form id="form">
            <div class="box">
                <div class="add-box">
                    <div class="box-left">
                        <div class="form-group">
                            <label>角色:</label>
                            <input type="text" disabled  class="form-control" value="{$info.title}">
                        </div>
                        <div class="form-group">
                            <label>公司部门:</label>
                            <select class="form-control" name="depar_id" id="depar_id">
                                <option value="">请选择</option>
                                {volist name="depar" id="vo"}
                                    <option value="{$vo.id}" {eq name="middle.depar_id" value="$vo['id']"}selected{/eq}>{$vo._name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="box-right">
                        <div class="form-group">
                            <label>职位:</label>
                            <select class="form-control" name="position_id">
                                <option value="">请选择</option>
                                {volist name="position" id="vos"}
                                    <option value="{$vos.id}" {eq name="middle.position_id" value="$vos['id']"}selected{/eq}>{$vos.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="btn-box">
                        <input type="hidden" name="auth_id" value="{$info.id}">
                        <button type="button" class="btn btn-info" id="submit">确定</button>
                        <button type="reset" class="btn btn-grey">返回</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{/block}
{block name="js"}
{include file='base/validate'}
{include file='base/select2'}
<script>
    var fields ={
//        position: {
//                validators: {
//                notEmpty: {
//                    message: '职位不能为空'
//                }
//            }
//        },
//        depar_id: {
//                validators: {
//                notEmpty: {
//                    message: '部门不能为空'
//                }
//            }
//        },
    }
    $(function () {
        $('#form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: fields
        });
        $("#form").submit(function (ev) {
            ev.preventDefault();
        });
        $("#submit").on("click", function () {
            var bootstrapValidator = $("#form").data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                $.ajax({
                    type: "POST",
                    url: "{:url('saveDeparPosition')}",
                    data: $('#form').serialize(),
                    success: function (info) {
                        if (info.code == 1) {
                            layer.msg(info.msg, {icon: 1});
                            setTimeout(function () {
                                location.href = info.url;
                            }, 1000); //延迟演示
                        } else{
                            layer.msg(info.msg, {icon: 5});
                        }

                    }
                });
                return false;
            } else return;
        });
    });
    $('#depar_id').select2({
//        tags: true,
        language: "zh-CN"
    });
    highlight_subnav("{:url('index')}");

</script>'

{/block}